﻿<div class="layui-card" id="lg-GradeList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>年级管理</div>
    <div class="layui-card-body" id="GradeList">
        <div class="lg-tree-wrap">
            <div class="lg-tree-tool">
                <div class="lg-tree-btn">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" v-on:click="Add()"><i class="fa fa-plus fa-fw"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh" v-on:click="Refresh()"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <table class="lg-tree-table">
                <thead class="lg-tree-head">
                    <tr>
                        <th class="lg-tree-title">班级名称</th>
                        <th class="lg-tree-title">权重排序</th>
                        <th class="lg-tree-title">是否启用</th>
                        <th class="lg-tree-title">操作</th>
                    </tr>
                </thead>
                <tbody class="lg-tree-body">
                    <tr class="lg-tree-item" :class="['depth-'+item.Depth,{'open':item.Open}]" v-show="item.Show" v-for="(item,index) in grades">
                        <td class="lg-tree-elem"><span class="lg-tree-indent"></span><i class="fa fa-caret-right" :class="{'fa-hide':!item.HasSub}" v-on:click="OnSlide(item)"></i>{{item.Name}}</td>
                        <td class="lg-tree-elem">{{item.SortNumber}}</td>
                        <td class="lg-tree-elem">
                            <div class="layui-unselect layui-form-switch layui-form-onswitch" v-if="item.IsUsing==1" v-on:click="Use(item,0)">
                                <em>ON</em><i></i>
                            </div>
                            <div class="layui-unselect layui-form-switch" v-if="item.IsUsing==0" v-on:click="Use(item,1)">
                                <em>OFF</em><i></i>
                            </div>
                        </td>
                        <td class="lg-tree-elem">
                            <div class="lg-tree-cell">
                                <a class="layui-btn layui-btn-xs layui-btn-normal" title="编辑" v-on:click="Edit(index,$event)"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" title="删除" v-on:click="Delete(index,item)"><span class="fa fa-trash-o fa-fw"></span></a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
        <!-- 内容主体区域结束 -->
        <!-- 添加年级弹窗区域 -->
        <div class="GradeForm" v-show="form.open"  v-on:click="SelectHide()">
            <div class="layui-form-item">
                <label class="layui-form-label">班级名称</label>
                <div class="layui-input-block">
                    <input type="text" name="Name" v-model="form.data.Name" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属班级</label>
                <div class="layui-input-block">
                    <div class="layui-select-title">
                        <input type="text" id="FatherId" v-on:click.stop="SelectShow()" v-model="SelectGradeName" class="layui-input layui-unselect" />
                        <i class="fa fa-caret-down"></i>
                    </div>
                    <dl class="lg-select-box" style="display:none;" id="FatherIdSelect">
                        <dd :class="'depth-'+item.Depth" v-for="(item,index) in grades" v-on:click="OnSelected(item)">{{item.Name}}<span class="hide">{{item.Id}}</span></dd>
                    </dl>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权重排序</label>
                <div class="layui-input-block">
                    <input type="text" name="SortNumber" v-model="form.data.SortNumber" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i style="color:#f00">*</i>是否启用</label>
                <div class="layui-input-block">
                    <div class="layui-unselect layui-form-switch layui-form-onswitch" v-if="form.data.IsUsing==1" v-on:click="OnSwitch(0)">
                        <em>ON</em><i></i>
                    </div>
                    <div class="layui-unselect layui-form-switch" v-if="form.data.IsUsing==0" v-on:click="OnSwitch(1)">
                        <em>OFF</em><i></i>
                    </div>
                </div>
            </div>
            <div class="layui-form-item text-center">
                <button class="layui-btn" v-on:click="OnSubmit">确认</button>
            </div>
        </div>
        <!-- 添加年级弹窗区域结束 -->

    </div>
</div>
<script>
    frame.createPage({
        mounted: function() {
            var page = this;
            page.vm = Vue.createApp({
                data() {
                    return {
                        grades: [],
                        form: {
                            open: false,
                            action: "add",
                            data: {
                                IsUsing: 1,
                            },
                        },
                    }
                },
                computed: {
                    SelectGradeName: function() {
                        var fid = this.form.data.FatherId
                        if (fid) {
                            return this.grades.filter(d => d.Id == fid)[0].Name
                        } else {
                            return "===默认第一级===";
                        }
                    }
                },
                mounted: function() {
                    this.GetGrades();
                },
                methods: {
                    showPage: function() {
                        Pages.RedirectTo({
                            url: "/lgm/apply/Grade/List",
                            title: "年级管理"
                        })
                    },
                    GetGrades: function() {
                        lg.request({
                            url: "/api/sys/apply/GetGradeList",
                            data: {page:1,limit:999},
                            success: res => {
                                if (res.code == 0) {
                                    this.FormatGrade(res.data)
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    FormatGrade: function(data) {
                        var grades = this.Sort(data, 0, []);
                        for (let i in grades) {
                            var obj = grades[i];
                            obj.Open = false;
                            obj.Show = obj.FatherId == 0 ? true : false;
                            obj.HasSub = data.filter(d => d.FatherId == obj.Id).length > 0;
                        }
                        this.grades = grades;
                        var def = { "Id": 0, "Name": "===默认第一级===" }
                        this.grades.unshift(def)
                    },
                    OnSlide: function(item) {
                        item.Open = !item.Open;
                        var subTree = this.Sort(this.grades, item.Id, []);
                        if (item.Open) {
                            let opened = subTree.filter(p => p.Open);
                            for (let i in subTree) {
                                let obj = subTree[i];
                                if (obj.FatherId == item.Id || opened.filter(p => p.Id == obj.FatherId).length > 0) {
                                    obj.Show = true;
                                }
                            }
                        } else {
                            for (let i in subTree) {
                                let obj = subTree[i];
                                obj.Show = false;
                            }
                        }

                    },
                    Sort: function(data, fid, arr) {
                        var that = this
                        var grades = data.filter(d => d.FatherId == fid)
                        if (grades.length > 0) {
                            for (let i in grades) {
                                var obj = grades[i];
                                arr.push(obj);
                                that.Sort(data, obj.Id, arr)
                            }
                        }
                        return arr;
                    },
                    Use: function(item, val) {
                        var that = this;
                        lg.request({
                            url: "/api/sys/apply/EditGrade",
                            method: "post",
                            data: { Id: item.Id, IsUsing: val },
                            success: res => {
                                if (res.code == 0) {
                                    layer.msg("操作成功!", { icon: 1 });
                                    item.IsUsing = val
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    Refresh: function() {
                        this.GetGrades();
                    },
                    Add: function() {
                        this.Init();
                        layui.layer.open({
                            type: 1,
                            title: '添加班级',
                            skin: 'layui-layer-rim', //加上边框
                            area: ['600px', '350px'], //宽高
                            content: $(".GradeForm")
                        });
                        this.form.action = "add";
                        console.log(this.form)
                    },
                    Edit: function(i, e) {
                        this.Init();
                        layui.layer.open({
                            type: 1,
                            title: '添加班级',
                            skin: 'layui-layer-rim', //加上边框
                            area: ['600px', '350px'], //宽高
                            content: $(".GradeForm")
                        });
                        this.form.data = lg.obj.copy(this.grades[i]);
                        this.form.action = "edit";
                    },
                    OnSwitch: function(val) {
                        this.form.data.IsUsing = val;
                    },
                    SelectShow: function() {
                        $("#FatherIdSelect").show();
                    },
                    SelectHide: function() {
                        $("#FatherIdSelect").hide();
                    },
                    OnSelected: function(item) {
                        this.SelectHide()
                        if (item.Id == this.form.data.Id) {
                            layer.msg("不能选择自己！", { icon: 2 })
                            return false;
                        } else {
                            this.form.data.FatherId = item.Id;
                        }
                    },
                    Init: function() {
                        this.SelectHide()
                        this.form.data = {
                            IsUsing: 1,
                        };
                    },
                    OnSubmit: function() {//提交
                        var url = this.form.action == "add" ? "/api/sys/apply/AddGrade" : "/api/sys/apply/EditGrade";
                        lg.request({
                            url: url,
                            method: "post",
                            data: this.form.data,
                            success: res => {
                                if (res.code == 0) {
                                    layer.closeAll();
                                    layer.msg("操作成功", { icon: 1 });
                                    page.vm.Refresh()
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    Delete: function(i, item) {
                        var that = this
                        layer.confirm('确认删除' + item.Name + '?', function(i) {
                            lg.request({
                                url: "/api/sys/apply/DeleteGrade",
                                method: "post",
                                data: { Id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        layer.msg("删除成功!", { icon: 1 });
                                        that.GetGrades();
                                    } else {
                                        top.layer.msg(res.msg, { icon: 2 });
                                    }
                                }
                            })
                        });
                    }
                },
            }).mount("#lg-GradeList")
        }
    }).mount();

</script>